<template>
  <div class='toptitle' :class="{'none-border':!border}">
    <div class='left'>
      <h2>
        <slot name='title'>
        </slot>
      </h2>
      <div class='btn'>
        <slot name='btn'>

        </slot>
      </div>
      <div class='tabs'>
        <slot name='tabs'>
        </slot>
      </div>
    </div>
    <div class='right'>
      <div class='iconout'>
        <slot name='icon'>
        </slot>
      </div>
      <div class='search'>
        <slot name='search'>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';

const props = defineProps({
  hasBack: {
    type: Boolean,
    default: false,
  },
  backRoute: {
    type: Object,
  },
  border: {
    type: Boolean,
    default: true
  }
});

const router = useRouter();
const navBack = () => {
  if (props.backRoute) router.replace(props.backRoute);
  else router.back();
};

</script>

<style lang='scss' scoped>
@use "@/assets/styles/vars.module" as *;

.toptitle {
  height: $top-title-height;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    // display: flex;
    align-items: center;
    h2 {
      font-size: 25px;
      color: #2f2f2f;
      font-weight: 400;
    }

    .btn {
width: 100%;
      cursor: pointer;
    }

    .back-wrap {
      display: flex;
      align-items: center;
      margin-right: 18px;
      font-size: 20px;
      color: rgba(136, 136, 136, 1);

      .icon {
        margin-right: 8px;
        font-size: 28px;
      }

      cursor: pointer;

      &:hover {
        color: #1a6be6;
      }
    }
  }

  .right {
 padding-right: 50px;
    .search {
      padding-left: 20px;
    }
    .iconout {
      font-size: 16px;
      color: #888;
      cursor: pointer;
    }
  }

}

.none-border {
  border-color: transparent;
}
</style>
